<style scoped>
.pro-con {
    padding: 0 30px;
}

.pro-card {
    margin-bottom: 10px;
}

.pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}

.pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.pro-card-headr {
    padding-right: 10px;
    text-align: right;
}

.pro-card-content {
    clear: both;
}

.pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}

.pro-paramvalue {
    padding-left: 30px;
    border-right: 1px solid #ddd;
}

.pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

</style>

<template>
    <div class="order-page">
        <product-title></product-title>
        <div class="pro-con">
            <div>
                <Form ref="" :model="searchForm" inline>
                    <Form-item prop="user">
                        <Input type="text" v-model="searchForm.LicenseNo" placeholder="订单号" />
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="search()">搜索</Button>
                    </Form-item>
                </Form>
            </div>
            <div class="card pro-card" v-for="(item,index) in carList" :key="item.id">
                <Row class="pro-card-head">
                    <Col span="12">
                    <Checkbox class="pro-card-title">{{item.LicenseNo}}</Checkbox>
                    </Col>
                </Row>
                <div class="pro-card-content">
                    <Row class="pro-card-contentrow">
                        <Col span="3" class="pro-paramname">车主</Col>
                        <Col span="5" class="pro-paramvalue">{{item.LicenseOwner}}</Col>
                        <Col span="3" class="pro-paramname">品牌型号</Col>
                        <Col span="5" class="pro-paramvalue">{{item.ModleName}}</Col>
                        <Col span="3" class="pro-paramname">代理人</Col>
                        <Col span="5" class="pro-paramvalue"> {{item.agent_name}}</Col>
                    </Row>
                    <Row class="pro-card-contentrow">
                        <Col span="3" class="pro-paramname">商业险到期时间</Col>
                        <Col span="5" class="pro-paramvalue">{{item.BusinessExpireDate?item.BusinessExpireDate:'无数据'}}</Col>
                        <Col span="3" class="pro-paramname">交强险到期时间</Col>
                        <Col span="5" class="pro-paramvalue">{{item.ForceExpireDate}}</Col>
                        <Col span="3" class="pro-paramname">注册日期</Col>
                        <Col span="5" class="pro-paramvalue">{{item.RegisterDate}}</Col>
                    </Row>
                    <Row class="pro-card-contentrow" v-for="(v,i) in item.status" :key="v">
                        <Col span="3" class="pro-paramname">报价状态</Col>
                        <Col span="5" class="pro-paramvalue">{{v}}</Col>
                        <Col span="3" class="pro-paramname">核保状态</Col>
                        <Col span="13" class="pro-paramvalue">{{item.submit[i]}}</Col>
                    </Row>
                </div>
            </div>
            <div class="tip" v-if="shwoTip" style="min-height:400px;text-align:center;padding:20px 0;margin-bottom:12px;border-top:1px solid #dedede;">
                暂无数据
            </div>
            <Row class="pro-pagesize">
                <Col span="24">
                <Page :total="listTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import productTitle from '../../components/productTitle'
import { getCarList } from '../../api/car'
export default {
    data() {
        return {
            page: 1,
            pagesize: 10,
            carList: [{
                "id": "5987ce8582dbe3d6768b4682",
                "LicenseNo": "豫A9JE66",
                "LicenseOwner": "杨勇强",
                "ModleName": "东风雪铁龙DC7205轿车",
                "ForceExpireDate": "2016-12-10",
                "BusinessExpireDate": "",
                "RegisterDate": "2008-03-06",
                "agent_name": "时连正",
                "status": [
                    "报价成功(人保).",
                    "报价成功(人保)."
                ],
                "submit": [
                    "非意向公司未核保",
                    "非意向公司未核保"
                ]
            },],
            listTotal: 1,
            searchForm: {
                "LicenseNo": '',
            }
        };
    },
    components: {
        productTitle
    },
    computed: {
        shwoTip() {
            return this.listTotal == 0 ? true : false;
        }
    },
    created() {
        this.getList2()
    },
    methods: {
        search() {
            this.getList();
        },
        getList() {
            let _params = {
                'LicenseNo': this.searchForm.LicenseNo,
                'p':this.page,
                'pagesize':this.pagesize
            }
            new Promise((resolve, reject) => {
                getCarList(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.carList = response.data.data.list;
                        this.listTotal = response.data.data.total;
                    } else {
                        this.carList = [];
                        this.listTotal = 0;
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getList2() {
            let _params = {
                'LicenseNo': this.searchForm.LicenseNo,
                'p':this.page,
                'pagesize':this.pagesize
            }
            new Promise((resolve, reject) => {
                getCarList(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.carList = response.data.data.list;
                        this.listTotal = response.data.data.total;
                    } 
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        pageChange(page) {
            this.page = page
            this.getList2()

        },
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getList2()
        },

    }

};
</script>
